<!--
 * @Author: your name
 * @Date: 2021-07-30 09:12:24
 * @LastEditTime: 2021-07-30 09:53:12
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \单词\响应式数据.html
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app"></div>
    <!-- 在vue2 ES5中 -->
    <!-- 1.响应式数据，在数据变化的时候去驱动视图的更新 -->
    <!-- 2.需要去监听数据的变化，数据劫持，数据代理，去做额外的事情 -->
    <script>
        const obj = {
            name: 'rousi',
            age: 18
        }
        // 我们需要一个特殊数据对象，能够在数据变化的时候去做别的事情
        // ESS的原理
        const vm = {}
        // Object.defineProperty(vm,'name',{
        //     // 获取属性值
        //     get(){
        //         // 返回值，vm.name的值
        //         return obj.name
        //     },
        //     // 设置属性值
        //     set(value){
        //         // 设置值 vm.name="jack" 此时的value就是jack
        //         obj.name=value
        //     }
        // })
        // 取出obj中的所有属性名称，键名
        const keys= Object.keys(obj)
        // console.log(keys);
        keys.forEach(key=>{
            Object.defineProperty(vm,key,{
                get(){
                    // 根据key从obj取值
                    return obj[key]
                },
                set (value){
                    // 根据key去obj设置
                    obj[key]=value
                    // 更新视图
                    render()
                }
            })
        })

        const ren =  () =>{
            const template =`
                <p>姓名:${ojb.name}</p>
                <p>年龄:${ojb.age}</p>
            `
            document.querySelector('#app').innerHTML = template
        }
        render()
    </script>
</body>
</html>